<template>
	<div :style="{minWidth: '1000px', height:windowHeight - 100 + 'px',overflowY: 'auto',overflowX: 'hidden' }">

		<Row :gutter="10">
			<Col span="6" class="inputDiv" v-for="(item,index) in data" :key="index">
			<Card>
				<div slot="title">
					<Icon type="md-desktop" />
					{{item.name}}
				</div>
				<div slot="extra">
					<a href="#" @click.prevent="showTop(item)">
						<Icon type="ios-loop-strong"></Icon>
						任务总数{{item.allCount}}
					</a>
				</div>
				<div class="cardText">
					<p>开始抽取时间</p>
					<p>{{item.beginTime || "今日未抽取"}}</p>
				</div>
				<div class="cardText">
					<p>最后抽取时间</p>
					<p>{{item.endTime || "-"}}</p>
				</div>
				<div>
					<ve-pie :data="item.chartData" :settings="chartSettings" judge-width height="300px" legend-position="bottom"></ve-pie>
				</div>
			</Card>
			</Col>
		</Row>
		<Modal v-model="showTopModal" title="任务执行耗时明细" footer-hide :mask-closable="false" width="600">
			<Table stripe :columns="columns" :data="tableList"></Table>
		</Modal>


		<Spin v-show="loading" fix>
			<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
			<div>Loading</div>
		</Spin>
	</div>
</template>

<script>
	import 'v-charts/lib/style.css'
	import VeLine from 'v-charts/lib/line.common';
	import VePie from 'v-charts/lib/pie.common';
	
	export default {
		name: "statisticsIndex",
		components: {
			VeLine,
			VePie
		},
		props: {
			menuTheme: String,
			windowHeight: Number
		},
		data() {
			return {
				showTopModal: false,
				loading: true,
				data: [],
				chartSettings: {
					offsetY: 120,
					level: [
						['等待', '抽取中', '成功', '失败'],
						['开启', '关闭']
					]
				},
				initOptions: {
					legend: {
						bottom: 10,
					},
				},
				tableList: [],
				columns: [{
						title: "源库表名",
						key: "tableName"
					},
					{
						title: "开始抽取时间",
						key: "beginDate"
					},
					{
						title: "耗时/秒",
						key: "useTime"
					}
				]
			}
		},
		mounted() {
			this.mainStatistics();
		},
		methods: {
			async mainStatistics() {
				const res = await this.$api.mainStatistics();
				if (res.code === 1) {
					this.data = res.data;
					//组装图表所需数据
					res.data.forEach(item => {
						//任务总数
						const allCount = item.closeCount + item.startCount;
						item.allCount = allCount;
						const chartData = {
							columns: ['类型', '任务数'],
							rows: []
						}
						Object.keys(item).forEach(keys => {
							console.log(keys)
							const obj = new Object()
							if (keys === "startCount") {
								if (item[keys] > 0) {
									obj["类型"] = "开启";
									obj["任务数"] = item[keys];
									chartData.rows.push(obj);
								}
							} else if (keys === "closeCount") {
								if (item[keys] > 0) {
									obj["类型"] = "关闭";
									obj["任务数"] = item[keys];
									chartData.rows.push(obj);
								}
							} else if (keys === "waitCount") {
								if (item[keys] > 0) {
									obj["类型"] = "等待";
									obj["任务数"] = item[keys];
									chartData.rows.push(obj);
								}
							} else if (keys === "runningCount") {
								if (item[keys] > 0) {
									obj["类型"] = "抽取中";
									obj["任务数"] = item[keys];
									chartData.rows.push(obj);
								}
							} else if (keys === "failedCount") {
								if (item[keys] > 0) {
									obj["类型"] = "失败";
									obj["任务数"] = item[keys];
									chartData.rows.push(obj);
								}
							} else if (keys === "successCount") {
								if (item[keys] > 0) {
									obj["类型"] = "成功";
									obj["任务数"] = item[keys];
									chartData.rows.push(obj);
								}
							}
						})
						item.chartData = chartData;
					})
					this.loading = false;
				} else {
					this.$Message.error(res.errMsg);
				}
			},
			async showTop(item) {
				this.showTopModal = true;
				const res = await this.$api.taskRunningTime({
					batch: item.batch
				})
				if (res.code === 1) {
					this.tableList = res.data;
				} else {
					this.$Message.error(res.errMsg);
				}
			},

		},

	}
</script>
<style scoped="sIndex">
	p {
		line-height: 26px;
	}

	.inputDiv {
		margin-bottom: 10px;
	}

	.mountCards>p:nth-child(1) {
		float: left;
	}

	.mountCards>p:nth-child(2) {
		float: right;
	}

	.cardText {
		display: flex;
		justify-content: space-between;
	}

	.demo-spin-icon-load {
		animation: ani-demo-spin 1s linear infinite;
	}

	@keyframes ani-demo-spin {
		from {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(180deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.demo-spin-col {
		height: 100px;
		position: relative;
		border: 1px solid #eee;
	}
</style>
